<template>
	<view class="inventory">
		<view class="inventory-btn">
			<image src="../../static/serach.png" class="imm" />
			<u-search placeholder="请输入库存名称/存放位置" v-model="keywords" :showAction="false" @search="getSearch"
				@clear="getSearch"></u-search>
			<view class="" style="margin-left: 30rpx;margin-top: 10rpx;">
				<button plain type="primary" size="mini" @click="handleRecord(2)">领用记录</button>
			</view>
			<!-- <button plain type="primary" @click="handleRecord(1)">入库记录</button> -->

		</view>
		<view v-for="item in dataList" :key="item.id" class="inventory-item">
			<view class="item-row">
				<view class="item-label">库存名称</view>
				<view class="item-value"> {{ item.name ||'-'}} </view>
			</view>
			<view class="item-row">
				<view class="item-label">库存数量</view>
				<view class="item-value"> {{ item.num ||0}} </view>
			</view>
			<view class="item-row">
				<view class="item-label">库存分类</view>
				<view class="item-value"> {{ item.category.name||'-' }} </view>
			</view>
			<view class="item-row">
				<view class="item-label">单价</view>
				<view class="item-value"> {{ item.price ||0}}元 </view>
			</view>
			<view class="item-row">
				<view class="item-label">存放位置</view>
				<view class="item-value"> {{ item.address ||'-'}} </view>
			</view>
			<view class="item-row" style="align-items:flex-end;">
				<image v-if="item.image" :src="item.image" mode="scaleToFill" @click="handlePreview(item.image)" />
				<view class="" style="width: 150rpx;" @click="toUse(item)">
					<u-button v-if="item.num!=0" type="primary" text="领用" size="small"></u-button>
					<u-button v-if="item.num==0" type="primary" text="领用" size="small" :disabled="true"></u-button>
				</view>
			</view>
		</view>
		<u-modal :show="show" title="请输入数量" @confirm="showConfirm(item)" @cancel="show=false" showCancelButton>
			<u--input placeholder="请输入领用数量" v-model="num" border="surround" clearable type="number"></u--input>
		</u-modal>
		<uni-load-more :status="loadMore" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				page: 1, // 页数
				total: 0, // 总条数
				loadMore: "more", // 加载状态
				dataList: [], // 数据列表
				show: false,
				inventInfo: {},
				num: 0,
				keywords: ''
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			if (this.loadMore === "more") {
				this.page++;
				this.getList();
			}
		},
		methods: {
			// 获取库存列表
			getList() {
				this.loadMore = "loading";
				this.$https
					.get("/inventory/list", {
						page: this.page,
						keywords: this.keywords
					})
					.then((res) => {
						let list = res.data.data || [];
						this.dataList = this.page === 1 ? list : this.dataList.concat(list);
						this.total = res.data.total;
						this.changeLoadStratus();
					})
					.catch(() => {
						this.changeLoadStratus();
					});
			},
			// 改变加载状态
			changeLoadStratus() {
				if (this.dataList.length >= this.total) {
					this.loadMore = "noMore";
				} else {
					this.loadMore = "more";
				}
			},
			toUse(item) {
				this.num = 0
				if (item.num == 0) return
				this.inventInfo.inventory_id = item.id
				this.inventInfo.address = item.address
				this.show = true
			},
			showConfirm() {
				this.inventInfo.num = this.num
				this.$https
					.get("/inventory/getInventory", this.inventInfo)
					.then((res) => {
						if (res.code == 1) {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: "none",
							})
							this.show = false
							this.getList()
						}
					})
					.catch(() => {
						// this.changeLoadStratus();
					});
			},
			// 预览图片
			handlePreview(url) {
				uni.previewImage({
					current: url,
					urls: [url],
				});
			},
			getSearch() {
				this.getList()
			},
			// 入库/领用记录
			handleRecord(type) {
				uni.navigateTo({
					url: "/pages/inventory/entryOrOut?type=" + type,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.inventory {
		padding: 20rpx;
		min-height: calc(100vh - 40rpx);
		background-color: #f5f5f5;
		overflow-y: auto;

		.imm {
			width: 36rpx;
			height: 36rpx;
			margin-right: 14rpx;
		}

		&-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.inventory-item {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0 0 10rpx rgb(229, 239, 243);
			font-size: 28rpx;

			.item-row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 0;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.item-label {
					width: 140rpx;
				}

				.item-value {
					flex: 1;
					text-align: right;
					color: #666;
				}
			}
		}
	}
</style>